<template>
  <div :class="{'mobile-container':device === 'mobile','app-container':device !== 'mobile'}">
    <div v-if="device !== 'mobile'" class="buy-use padding-sm">
      <div class="buy-use-title">尊敬的{{ userinfo.username }}，</div>
      <div class="buy-use-desc">您当前的套餐为：</div>
    </div>
    <div v-if="list.length === 0" class="text-center padding-top-xl">
      暂无商品
    </div>
    <div v-else class="sub-store-item">
      <el-tabs v-if="device === 'mobile'" v-model="activeName" class="padding-sm" tab-position="top" @tab-click="handleClick">
        <el-tab-pane v-for="(item, index) in list" :key="index" :label="item.package_name" :name="item.package_name">
          <el-card
            class="sub-itm padding-sm addons-price"
            :body-style="{ padding: 0 }"
            shadow="hover"
            :class="{ 'addons-price-active': selectPIndex === index }"
            @click.native="selectSub(index)"
          >
            <div class="addons-price-item">
              <div class="addons-price-top">
                <div class="addons-price-top-text">{{ item.package_name }}</div>
                <div class="addons-price-top-desc">{{ item.package_description }}</div>
              </div>
              <div class="addons-price-list">
                <div v-for="(service, sindex) in item.service" :key="sindex" class="addons-price-list_item">
                  <div class="addons-price-list_item-left">
                    <div class="addons-price-list_item-left_title">
                      {{ service.service_name }}
                    </div>
                    <div class="addons-price-list_item-left_desc">
                      {{ service.service_description }}
                    </div>
                  </div>
                  <div class="addons-price-list_item-right">
                    <el-image
                      :src="require('@/static/img/addons/success.png')"
                      mode="widthFix"
                      :width="12"
                      :height="12"
                    />
                  </div>
                </div>
              </div>
            </div>

          </el-card>
        </el-tab-pane>
      </el-tabs>

      <el-row v-else :gutter="20">
        <!-- <div class="float-right text-pointer padding-sm" @click="orderRegis">
          订购记录
        </div> -->

        <el-col v-for="(item, index) in list" :key="index" :md="12" :xs="24" :xl="6" :lg="8">
          <el-card
            class="sub-itm padding-sm addons-price"
            :body-style="{ padding: 0 }"
            shadow="hover"
            :class="{ 'addons-price-active': selectPIndex === index }"
            @click.native="selectSub(index)"
          >
            <div class="addons-price-item">
              <div class="addons-price-top">
                <div class="addons-price-top-text">{{ item.package_name }}</div>
                <div class="addons-price-top-desc">{{ item.package_description }}</div>
              </div>
              <div class="addons-price-list">
                <div v-for="(service, sindex) in item.service" :key="sindex" class="addons-price-list_item">
                  <div class="addons-price-list_item-left">
                    <div class="addons-price-list_item-left_title">
                      {{ service.service_name }}
                    </div>
                    <div class="addons-price-list_item-left_desc">
                      {{ service.service_description }}
                    </div>
                  </div>
                  <div class="addons-price-list_item-right">
                    <el-image
                      :src="require('@/static/img/addons/success.png')"
                      mode="widthFix"
                      :width="12"
                      :height="12"
                    />
                  </div>
                </div>
              </div>
            </div>

          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="sub-main" :class="{'mobile-h':device === 'mobile','pc-h':device !== 'mobile'}">
      <div class="sub-create">
        <div class="sub-create-time">
          <div class="sub-create-time-left">时长</div>
          <div class="sub-create-time-right">
            <div
              v-for="(item, index) in timeLength"
              :key="index"
              class="sub-create-time-right_item"
              :class="{ 'sub-create-time-right_item_active': item.time_id === timeId }"
              @click="changeTime(item)"
            >{{
              item.time_name }}</div>
          </div>
        </div>
        <div class="sub-create-price">
          <div class="sub-create-price-left">总费用</div>
          <div class="sub-create-price-right price">
            {{ totalPrice }}
          </div>
        </div>
        <div class="bom-cont">
          <el-button type="danger" round @click="gobuy()">立即购买</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { subCreateOrder, subscriptionList } from './api'
export default {
  data() {
    return {
      activeName: '',
      value: 5,
      list: [],
      total: 0,
      listLoading: false,
      selectPIndex: 0,
      timeLength: [],
      timeId: 0,
      totalPrice: 0,
      userinfo: {},
      package_id: 0
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'device'])
  },
  created() {
    const that = this

    that.userinfo = that.userInfo.userInfo

    this.getList()
  },
  methods: {
    getList() {
      const that = this
      that.listLoading = true
      subscriptionList().then((response) => {
        that.list = response.data
        that.timeLength = response.data[that.selectPIndex].time
        that.package_id = response.data[that.selectPIndex].package_id
        that.timeId = that.timeLength[0].time_id
        that.totalPrice = that.timeLength[0].time_price
        that.activeName = response.data[that.selectPIndex].package_name
        that.listLoading = false
      })
    },
    changeTime(item) {
      this.timeId = item.time_id
      this.totalPrice = item.time_price
    },
    handleClick(tab, event) {
      this.selectSub(tab.index)
    },
    selectSub(index) {
      const that = this
      this.selectPIndex = index
      that.package_id = that.list[index].package_id
      that.timeLength = that.list[index].time
      that.timeId = that.timeLength[0].time_id
      that.totalPrice = that.timeLength[0].time_price
    },
    gobuy(mid) {
      const that = this
      subCreateOrder({
        package_id: that.package_id,
        time_id: that.timeId
      }).then(res => {
        console.log('支付成功参数', res)
        that.$router.push({
          name: 'diandi-subscription-service-buy',
          params: {
            'order_id': res.data.order_id,
            'qrcode': res.data.qrcode
          }
        })
      }).catch(err => {
        console.log('支付失败', err)
      })
    },
    orderRegis() {
      const that = this
      that.$router.push({ name: 'service-register' })
    }
  }
}
</script>
<style lang="scss" scoped>
.buy-use {
  color: #4d4d4d;
  font-size: 12px;
  height: 100px;
  background-color: #202261;
  border-bottom: 1px solid #202261;
  border-radius: 15px 15px 0 0;
  padding-left: 32px;
  display: flex;

  .buy-use-title {
    color: #fff;
    font-size: 18px;
    margin-top: 20px;
    margin-right: 10px;
  }

  .buy-use-desc {
    margin-top: 20px;
    color: #fff;
    font-size: 18px;
  }
}

.sub-store-item {
  background-color: #fff;
  border-radius: 0 0 15px 15px;
  padding-bottom: 120px;
  padding: 0 20px;
}

.sub-itm {
  margin: 30px 0px;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
}

.ty-btn {
  width: 34px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid #aaadec;
  color: #aaadec;
  font-size: 11px;
  line-height: 20px;
  float: right;
}

.bom-cont {
  display: flex;
  justify-content: space-between;
}

.addons-desc {
  font-size: 11px;
  margin-top: 5px;
  color: #4d4d4d;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 35px;
  width: 70%;
}

.ex-btn {
  width: 87px;
  height: 27px;
  background: #5357cb;
  box-shadow: 0px 3px 3px 1px rgba(83, 87, 203, 0.29);
  border-radius: 14px;
  color: #fff;
  line-height: 27px;
}

.addons-title {
  font-size: 13px;
}

.float-right {
  float: right;
  color: #7174ec;
  font-size: 13px;
}

.addons-price-active {
  border: 1px solid #202261;
}

.addons-price {
  border-radius: 5px;
  opacity: 1;
  padding-bottom: 50px;
  cursor: pointer;

  .addons-price-item {
    min-height: 550px;
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    margin: 0 30px;

    .addons-price-top {
      display: flex;
      flex-direction: column;
      flex-basis: 100%;
      justify-content: center;
      text-align: center;
      align-items: center;
      height: 104px;
      // background: url('~@/static/img/addons/bg_bus.png');
      border-radius: 0px 0px 0px 0px;
      opacity: 1;

      .addons-price-top-text {
        width: 160px;
        height: 46px;
        font-size: 32px;
        font-weight: bold;
        line-height: 32px;
      }

      .addons-price-top-desc {
        height: 26px;
        font-size: 18px;
        font-weight: 400;
        line-height: 18px;
      }
    }

    .addons-price-num {
      display: flex;
      justify-content: center;
      align-items: end;
      margin-top: 10px;

      .addons-price-num-p {
        color: #467FE8;
        font-size: 27px;
        font-weight: 600;
      }

      .addons-price-num-unit {
        font-size: 14px;
      }
    }

    .addons-price-list {
      .addons-price-list_item {
        display: flex;
        justify-content: space-between;
        margin: 19px 0;

        .addons-price-list_item-left {
          height: 29px;

          font-weight: 400;
          line-height: 20px;

          .addons-price-list_item-left_title {
            font-size: 20px;
            color: #000000;

          }

          .addons-price-list_item-left_desc {
            font-size: 14px;
            color: #aaadec;
          }
        }

        .addons-price-list_item-right {}
      }
    }
  }
}

.mobile-h {
  height: 160px;
}
.pc-h {
  height: 100px;

}
.sub-main {
  background: #e6ebf5;
  width: 100%;
  position: fixed;
  bottom: 0px;
  line-height: 100px;
  display: flex;

  .sub-create {
    padding-left: 20px;
    align-items: center;
    display: flex;
    margin: 0 auto;
    flex-wrap: wrap;
    .sub-create-time {
      display: flex;
      height: 50px;
      line-height: 50px;
      font-size: 18px;
      margin-right: 50px;

      .sub-create-time-left {
        // styles for left side
        width: 100px;
      }

      .sub-create-time-right {
        // styles for right side
        display: flex;
        flex-wrap: wrap;
        ruby-align: start;
        align-items: center;
        .sub-create-time-right_item {
          color: #202261;
          background: #fff;
          border-color: #202261;
          width: auto;
          padding: 0 10px;
          height: 40px;
          line-height: 40px;
          border: 1px solid #e5e5e5;
          margin-right: 20px;
          text-align: center;
          border-radius: 5px;
          cursor: pointer;
          margin-bottom: 5px;
        }

        .sub-create-time-right_item_active {
          color: #fff;
          background: #202261;
          border-color: #fff;
          // width: 70px;
          height: 40px;
          line-height: 40px;
          border: 1px solid #202261;
          margin-right: 20px;
          text-align: center;
          border-radius: 5px;
          cursor: pointer;
        }
      }

    }

    .sub-create-price {
      display: inline-flex;

      margin-right: 50px;
      line-height: 50px;
      font-size: 18px;

      .sub-create-price-left {
        width: 100px;

      }

      .sub-create-price-right {
        display: flex;
        width: 5em;

        &:before {
          content: "¥";
          display: inline-block;
          margin-right: 3px;
        }
      }

      .price {
        // styles for price
      }
    }
  }
}
</style>
